
import { useState, useTransition } from "react"
import { Divider, List, Avatar, Input } from 'antd';
// useTransition
// 是 React 18 中引入的一个 Hook，用于管理 UI 中的过渡状态，特别是在处理长时间运行的状态更新时。它允许你将某些更新标记为“过渡”状态，这样 React 可以优先处理更重要的更新，比如用户输入，同时延迟处理过渡更新。
interface Item {
    id: number;
    name: string;
    address: string
}

export function UseTransitionDemo() {

    const [val, setVal] = useState('')
    const [isPending, startTransition] = useTransition();
    const [list, setList] = useState<Item[]>([])
    const changeVal = (e: React.ChangeEvent<HTMLInputElement>) => {
        const val = e.target.value
        setVal(val)
        fetch('/api/list?keyWord=' + val).then((res) => res.json()).then((res) => {
            const list = res?.list ?? []

            // setList([...list])

            // 过渡
            startTransition(() => {
                setList([...list])
            })

        })
    }

    return (
        <div>

            <h3>UseTransitionDemo</h3>

            <Input value={val} onChange={(e) => changeVal(e)} />
            <div>
                {isPending ? '获取数据中' : ''}
            </div>
            <Divider orientation="left">Default Size</Divider>
            <List
                size="small"
                header={<div>Header</div>}
                footer={<div>Footer</div>}
                bordered
                dataSource={list}
                renderItem={(item, index) => <List.Item>
                    <List.Item.Meta
                        avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
                        title={item.name}
                        description={item.address}
                    />
                </List.Item>}
            />
        </div>
    )
}